<template>
  <layout :showBg="false">
    <template #header>
      <view class="header flex flex-a">
        <image
          src="../../assets/images/icons/arrow-right.png"
          class="arrow-left back"
          style="width: 48rpx; height: 48rpx; opacity: 0.6"
          mode="scaleToFill"
          @click="back"
        />
        <view class="input flex flex-a">
          <image
            src="../../assets/images/icons/search.png"
            style="width: 40rpx; height: 40rpx"
          ></image>
          <input
            v-model="keyword"
            placeholder="请输入关键字"
            placeholder-class="input-placeholder"
            class="f1"
            confirmType="search"
            style="padding: 0 16rpx"
            @confirm="onSearch(true)"
            @input="onInput"
          />
          <image
            src="../../assets/images/icons/close-circle.png"
            style="width: 40rpx; height: 40rpx"
            mode="scaleToFill"
            v-show="false"
            @click="clearKeyword"
          />
        </view>
        <text @click="onSearch(true)" class="active-text fs-32">搜索</text>
      </view>
    </template>
    <view class="content">
      <view class="list">
        <view v-if="history.length" class="title flex flex-bt">
          <text class="fs-32 c-80 bold">历史搜索</text>
          <image
            src="../../assets/images/icons/delete.png"
            @click="beforeClearHistory"
            style="width: 48rpx; height: 48rpx"
          />
        </view>
        <view class="flex tags">
          <view
            @longpress="onLongpress(item, index)"
            @click.prevent="setKeyword(item)"
            class="tag"
            v-for="(item, index) in history"
            :key="index"
          >
            {{ item }}
            <image
              src="../../assets/images/icons/close-circle.png"
              style="width: 24rpx; height: 24rpx"
              mode="scaleToFill"
              class="delete-icon"
              v-if="index == deleteIdx"
              @click.stop="onDelete(index)"
            />
          </view>
        </view>
      </view>
      <view v-if="categories.length" class="list">
        <view class="title fs-32 c-80 bold">短剧类型</view>
        <view class="flex tags">
          <text
            @click="onSelectCategory(item)"
            class="tag"
            v-for="item in categories"
            :key="item.id"
            >{{ item.name }}</text
          >
        </view>
      </view>
      <view class="list">
        <view class="title fs-32 c-80 bold">时间筛选</view>
        <view class="flex tags">
          <text
            class="tag"
            @click="onSelectTime(item)"
            v-for="item in times"
            :key="item.id"
          >
            {{ item.name }}</text
          >
        </view>
      </view>
      <u-modal
        :show="showModal"
        closeOnClickOverlay
        showCancelButton
        @cancel="showModal = false"
        @close="showModal = false"
        @confirm="clearHistory"
        title="确定要删除历史记录吗?"
      ></u-modal>
    </view>
  </layout>
</template>
<script>
import layout from "../../compennts/layout/index.vue";
import pageHead from "../../compennts/pageHead/index.vue";
import { getDramaCategories } from "../../api/drama/index";

export default {
  components: {
    layout,
    pageHead,
  },
  data() {
    return {
      keyword: "",
      deleteIdx: -1,
      showModal: false,
      categories: [],
      history: [],
      selectTime: null,
      selectCategory: null,
      times: [
        {
          name: "今日",
          id: 0,
        },
        {
          name: "近3日",
          id: 1,
        },
        {
          name: "近7日",
          id: 2,
        },
      ],
    };
  },
  onShow() {
    this.getHistory();
    getDramaCategories().then((res) => {
      this.categories = res.data;
      uni.setStorageSync("categories", JSON.stringify(res.data || []));
    });
    this.selectCategory = null;
    this.selectTime = null
  },
  methods: {
    back() {
      uni.navigateBack();
    },
    getHistory() {
      let res = uni.getStorageSync("search");
      if (res) {
        this.history = JSON.parse(res);
      }
    },
    onInput(e){
      console.log(e.target.value)
      this.keyword = e.target.value
    },
    clearKeyword(){
      console.log(this.keyword)
      this.keyword = ''
      console.log(this.keyword)
      this.$forceUpdate();
      console.log('------')
    },
    onLongpress(item, index) {
      this.deleteIdx = index;
    },
    beforeClearHistory() {
      this.showModal = true;
    },
    clearHistory() {
      this.history = [];
      uni.setStorageSync("search", "[]");
      this.showModal = false;
    },
    onDelete(index) {
      this.history.splice(index, 1);
      this.deleteIdx = -1;
      uni.setStorageSync("search", JSON.stringify(this.history));
    },
    setKeyword(keyword) {
      this.keyword = keyword;
      this.onSearch();
    },
    onSelectTime(info) {
      console.log(info);
      this.selectTime = info.id;
      this.onSearch();
    },
    onSelectCategory(info) {
      this.selectCategory = info;
      this.onSearch();
    },
    onSearch(isOrigin) {
      if (isOrigin && !this.keyword) {
        // 点击搜索按钮时，如果搜索框为空，且没有历史记录，则不进行搜索
        // if(!this.history.length){
        //     return
        // }
        // this.keyword = this.history[0]
      }
      if (!this.history.includes(this.keyword) && this.keyword) {
        this.history.push(this.keyword);
        uni.setStorageSync("search", JSON.stringify(this.history));
      }
      let path = `/pages/index/search-result?keyword=${this.keyword}`;
      if (this.selectCategory?.id) {
        path += `&category=${this.selectCategory?.id}`;
      }
      if (this.selectTime !== null) path += `&time=${this.selectTime}`;
      uni.navigateTo({
        url: path,
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../assets/styles/common.less");
.header {
  padding: 0 32rpx;
  .input {
    flex: 1;
    background: #f7f8ff;
    height: 80rpx;
    border-radius: 16rpx;
    padding: 0 32rpx;
    margin: 0 32rpx;
    .input-placeholder {
      color: rgba(31, 35, 41, 0.4);
    }
  }
}
.content {
  padding: 32rpx;
  // background: ;
  .list {
    margin-bottom: 32rpx;
    .tags {
      display: flex;
      flex-wrap: wrap;
      .tag {
        margin-right: 24rpx;
        margin-top: 24rpx;
        background: #f3f3f3;
        border-radius: 8rpx;
        color: rgba(7, 11, 28, 0.6);
        font-size: 28rpx;
        padding: 8rpx 20rpx;
        // min-width:152rpx;
        height: 56rpx;
        display: inline-block;
        text-align: center;
        position: relative;
        .delete-icon {
          position: absolute;
          right: -12rpx;
          top: -12rpx;
        }
      }
    }
  }
}
</style>
